import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex)

// 获取歌单详情的请求接口
import { getOneSongDetail, getSongDetail, getSongLyrics, getSongs, getSongsID } from "@/api/index";

const state = {
    playlist: {},
    songsList: [],
    songMessage: [],    //音乐url
    songMessageDetail: {},   //音乐详情
    LRC: {},     //歌词
}
const mutations = {
    UPDATEPLAYLIST(state, value) {
        state.playlist = value
    },
    UPDATESONGSLIST(state, value) {
        state.songsList = value
    },
    UPDATESONGURL(state, value) {
        state.songMessage = value
    },
    UPDATESONGDETAIL(state, value) {
        state.songMessageDetail = value
    },
    UPDATESONGLYRICS(state, value) {
        let lyricsArr = value.split('\n')
        let arr = lyricsArr.map(item=>{
            let arr1 = item.slice(1).split(']')

            return {lrcTime:arr1[0],lrc:arr1[1]}
        })
        // 我这里直接处理成歌词赋值给state了，这个value里面还有歌词对应的时间的数据
// console.log(arr)
        state.LRC = arr
    }
}
// 获取推荐歌单信息
const actions = {
    async getSongFormDetail(context, songId) {
        const { data: res } = await getSongDetail(songId)
        // console.log(res.playlist)
        context.commit('UPDATEPLAYLIST', res.playlist)
    },
    // 获取歌单所有歌曲 SongsDetail组件用了
    async getFongsFromForm(context, id) {
        const { data: res } = await getSongs(id)
        // console.log(res)
        context.commit('UPDATESONGSLIST', res)
    },
    // 获取音乐url
    async getSongsFromId({ commit }, id) {
        const { data: res } = await getSongsID(id)
        commit('UPDATESONGURL', res.data)
    },
    // 获取歌曲详情
    async getSongsDetailFromId({ commit }, id) {
        const { data: res } = await getOneSongDetail(id)
        commit('UPDATESONGDETAIL', res)
    },
    // 获取歌曲歌词
    async getSongLyricsFromId({ commit }, id) {
        const { data: res } = await getSongLyrics(id)
        // console.log(res)
        commit('UPDATESONGLYRICS', res.lrc.lyric)
    }
}
const getters = {
    // 歌单歌曲20首
    songs(state) {
        try {
            let song = state.songsList.songs
            let songsArray = []
            // 这里可以用map
            song.forEach((item, index) => {
                songsArray.push(
                    {
                        title: item.name,
                        singer: item.ar.map(item => item.name) || [],
                        album: item.al.name,
                        time: item.dt,  //一首歌总时长（dt）
                        time2: ((item.dt / 1000) / 60).toFixed(2) + '分',  //格式化time供songList组件的表格使用
                        id: item.id,        //歌曲id
                        index: index + 1,      //索引
                    }
                )
            })
            return songsArray
        } catch (error) {
            // 捕获到了错误，好像是组件的错误吧，还没搞明白，求指点
            // 这里return出去 让代码继续执行，功能都能正常使用
            return
        }
    },


}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
})
